<template>
    <div>
        <el-card class="box-card" style="width: 100%;margin-left: 0%;padding-top: 20px">
            <el-row>
                <el-col :span="2">
                    <div class="grid-content bg-purple" style="margin-left: 20px;margin-top: 2px">
                        当前租户:
                    </div>
                </el-col>
                <el-col :span="22">
                    <el-radio v-for="(item,index) in tenantNames" :key="index" v-model="tenantName" :label="item" @input="tenantNameEdit">{{ item }}</el-radio>
                </el-col>
            </el-row>

            <div style="padding-top: 20px">&nbsp;
                <!--  表单  -->
                <avue-form :option="option" v-model="obj" @submit="submit"></avue-form>
            </div>
        </el-card>
    </div>
</template>


<script>

import {setStore, getStore} from "@/util/store";

export default {
    components: {},
    data() {
        return {
            uri: {
                infoList: "/api/admin/all/docConfig/findPage",
                getByCode: "/api/admin/all/docConfig/findByCode",
                info: "/api/admin/all/docConfig",
                getTenantNames: "/api/admin/all/docConfig/getTenantNames",
            },
            // 租户
            tenantName: '',
            tenantNames: [],
            // 原配置数据
            config: {},
            // 表单数据
            obj: {},
            // 表单配置
            option: {
                submitBtn: true,
                emptyBtn: false,
                submitText: '更新配置',
                emptyText: "关闭",
                group: [
                    {
                        icon: 'el-icon-info',
                        label: '基本信息配置',
                        collapse: true,
                        prop: 'group1',
                        column: [
                            {
                                label: '文档名',
                                prop: 'topTitle',
                                labelWidth: 130,
                                type: 'input',
                                span: 13,
                            },
                            {
                                label: '文档名颜色',
                                prop: 'topTitleColor',
                                labelWidth: 130,
                                type: 'color',
                                span: 13,
                            },
                            {
                                label: '顶部搜索提示',
                                prop: 'topSearchTip',
                                labelWidth: 130,
                                type: 'input',
                                span: 13,
                            }, {
                                label: '左测搜索提示',
                                prop: 'leftSearchTip',
                                labelWidth: 130,
                                type: 'input',
                                span: 13,
                            }
                        ]
                    },
                    {
                        icon: 'el-icon-info',
                        label: '首页配置',
                        collapse: false,
                        prop: 'group2',
                        column: [
                            {
                                label: 'logo 图地址',
                                prop: 'logo',
                                labelWidth: 130,
                                type: 'input',
                                span: 13,
                            },
                            {
                                label: '首页标题',
                                prop: 'title',
                                span: 13,
                                labelWidth: 130,
                            },
                            {
                                label: '文档描述',
                                prop: 'description',
                                span: 13,
                                labelWidth: 130,
                            },
                            {
                                label: '首页按钮文字',
                                prop: 'button',
                                labelWidth: 130,
                                span: 13,
                            },
                            {
                                label: '按钮跳转地址',
                                prop: 'buttonHref',
                                labelWidth: 130,
                                span: 13,
                            },
                            {
                                label: '文档特点(json)',
                                prop: 'features',
                                type: "textarea",
                                labelWidth: 130,
                                span: 13,
                            },
                        ]
                    },
                    {
                        icon: 'el-icon-info',
                        label: '底部配置',
                        collapse: false,
                        prop: 'group3',
                        column: [
                            {
                                label: '底部内容 (json)',
                                prop: 'bottomContent',
                                type: "textarea",
                                labelWidth: 130,
                                span: 13,
                            },
                            {
                                label: '友情链接 (json)',
                                prop: 'bottomBlogroll',
                                type: "textarea",
                                labelWidth: 130,
                                span: 13,
                            }
                        ]
                    },
                ]
            },
        }
    },
    mounted() {

    },
    created() {
        this.initTenantName();
        this.getConfig();
    },
    activated: function () {

    },
    watch: {
        "tenantName": {
            handler(newVal, oldVal) {
                this.getConfig();
            }
        }
    },
    methods: {
        /**
         * 初始化租户
         */
        initTenantName() {
            this.crud.get(this.uri.getTenantNames).then(res => {
                this.tenantNames = res.data.data;
                // 设置默认
                let tenantName = getStore({name: 'tenantName'});
                if (tenantName != null && tenantName !== '') {
                    this.tenantName = tenantName;
                } else {
                    this.tenantName = this.tenantNames[0];
                    setStore({name: 'tenantName', content: this.tenantName})
                }
                console.log("当前租户：" + this.tenantName)
            })
        },
        /**
         * 获取文档配置信息
         */
        getConfig() {
            this.crud.get(this.uri.getByCode, {code: "doc-config"}).then(res => {
                this.config = res.data.data;
                this.obj = JSON.parse(this.config.content);
                if (this.obj.features != null) {
                    this.obj.features = JSON.stringify(this.obj.features, null, 2)
                }
                if (this.obj.bottomContent != null) {
                    this.obj.bottomContent = JSON.stringify(this.obj.bottomContent, null, 2)
                }
                if (this.obj.bottomBlogroll != null) {
                    this.obj.bottomBlogroll = JSON.stringify(this.obj.bottomBlogroll, null, 2)
                }
            })
        },


        /**
         * 切换租户
         * @param tenantName
         */
        tenantNameEdit(tenantName) {
            console.log("切换租户：" + tenantName)
            setStore({name: 'tenantName', content: this.tenantName})
        },
        /**
         * 修改 配置数据
         * @param form
         * @param done
         */
        submit(form, done) {
            let contentData = JSON.parse(JSON.stringify(this.obj));
            // 处理json 数据
            if (contentData.features != null && contentData.features !== '') {
                try {
                    contentData.features = JSON.parse(this.obj.features)
                } catch (err) {
                    this.$message.error("文档特点json格式错误")
                    done(form);
                    throw new Error("文档特点json格式错误")
                }
            }
            if (contentData.bottomContent != null && contentData.bottomContent !== '') {
                try {
                    contentData.bottomContent = JSON.parse(this.obj.bottomContent)
                } catch (err) {
                    this.$message.error("底部内容json格式错误")
                    done(form);
                    throw new Error("底部内容json格式错误")
                }
            }
            if (contentData.bottomBlogroll != null && contentData.bottomBlogroll !== '') {
                try {
                    contentData.bottomBlogroll = JSON.parse(this.obj.bottomBlogroll)
                } catch (err) {
                    this.$message.error("友情链接json格式错误")
                    done(form);
                    throw new Error("友情链接json格式错误")
                }
            }
            // 修改配置信息中的内容
            this.config.content = JSON.stringify(contentData);
            // 保存数据
            this.crud.put(this.uri.info + "/" + this.config.id, this.config).then((res) => {
                console.debug(res);
                done(form);
            }).catch((err) => {
                console.error(err);
                done(form);
            })
        }
    }
}
</script>

